<template>
	<view class="g-h5 body-content">
		<view class="userinfo-view" @tap.stop="goLogin">
			<view class="userinfo-name">{{phone ? phone : '未登录'}}</view>
			<u-avatar :src="src"></u-avatar>
		</view>
		<scroll-view class="book-scroll" style="white-space: nowrap;" :scroll-x="true">
			<view style="display: flex;flex-wrap: nowrap;padding: 20rpx;">
				<view class="now-read-view">
					<view class="now-read-text">当前在读</view>
					<view class="now-book-view" @tap.stop="goDetail">
						<image class="now-book-img"
							src="https://wfqqreader-1252317822.image.myqcloud.com/cover/243/33889243/t6_33889243.jpg">
						</image>
						<view class="now-book-name">理想国（汉译世界学术名著丛书）</view>
						<view class="now-book-pre">70%</view>
					</view>
				</view>
				<view class="now-read-view">
					<view class="now-read-text">最近读过</view>
					<view style="display: flex;flex-wrap: nowrap;">
						<view class="now-book-view">
							<image class="now-book-img"
								src="https://cdn.weread.qq.com/weread/cover/85/3300010685/s_3300010685.jpg">
							</image>
							<view class="now-book-name">一地鸡毛（典藏版）</view>
							<view class="now-book-pre">20%</view>
						</view>
						<view class="now-book-view">
							<image class="now-book-img"
								src="https://wfqqreader-1252317822.image.myqcloud.com/cover/587/23303587/s_23303587.jpg">
							</image>
							<view class="now-book-name">安徒生童话故事集</view>
							<view class="now-book-pre">70%</view>
						</view>
						<view class="now-book-view">
							<image class="now-book-img"
								src="https://wfqqreader-1252317822.image.myqcloud.com/cover/758/26406758/s_26406758.jpg">
							</image>
							<view class="now-book-name">人间值得</view>
							<view class="now-book-pre">34%</view>
						</view>
						<view class="now-book-view">
							<image class="now-book-img"
								src="https://wfqqreader-1252317822.image.myqcloud.com/cover/243/33889243/t6_33889243.jpg">
							</image>
							<view class="now-book-name">理想国（汉译世界学术名著丛书）</view>
							<view class="now-book-pre">70%</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="log-view">
			<view class="today-log">今日目标</view>
			<view class="time-view">
				<u-circle-progress active-color="#2979ff" :percent="40">
					<view class="u-progress-content">
						<text class='u-progress-info'>1:35</text>
					</view>
				</u-circle-progress>
			</view>
			<u-steps :list="numList" :current="1"></u-steps>
		</view>
		<view v-for="(item,index) in menuList.length" :key="index">
			<view class="menu-title-view">
				<view class="menu-title-text">
					{{menuList[index]}}
				</view>
				<view class="menu-item-view">
					<view class="view-text">
						历史
					</view>
					<view class="view-line"></view>
					<view class="view-text">
						人文
					</view>
					<view class="view-line"></view>
					<view class="view-text">
						社科
					</view>
					<view class="view-line"></view>
					<view class="view-text">
						商业
					</view>
					<view class="view-line"></view>
					<view class="view-text">
						更多
					</view>
				</view>
			</view>
			<view class="menu-middle-view">
				<view class="middle-view-item">
					<view class="book-item-view" @tap.stop="goDetail">
						<image class="book-image"
							src="https://wfqqreader-1252317822.image.myqcloud.com/cover/243/33889243/t6_33889243.jpg"
							mode=""></image>
						<view class="book-text1">理想国（汉译世界学术名著丛书）</view>
						<view class="book-text2">柏拉图</view>
					</view>
					<view class="book-item-view">
						<image class="book-image"
							src="https://cdn.weread.qq.com/weread/cover/85/3300010685/s_3300010685.jpg" mode="">
						</image>
						<view class="book-text1">一地鸡毛（典藏版）</view>
						<view class="book-text2">刘震云</view>
					</view>
				</view>
				<view class="middle-view-item">
					<view class="book-item-view">
						<image class="book-image"
							src="https://wfqqreader-1252317822.image.myqcloud.com/cover/587/23303587/s_23303587.jpg"
							mode=""></image>
						<view class="book-text1">安徒生童话故事集</view>
						<view class="book-text2">安徒生</view>
					</view>
					<view class="book-item-view">
						<image class="book-image"
							src="https://wfqqreader-1252317822.image.myqcloud.com/cover/758/26406758/s_26406758.jpg"
							mode=""></image>
						<view class="book-text1">人间值得</view>
						<view class="book-text2">中村恒子 奥田弘美</view>
					</view>
				</view>
			</view>
		</view>
		<u-tabbar v-model="current" :list="list"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						iconPath: 'home',
						selectedIconPath: 'home-fill',
						text: '在读',
						customIcon: false,
						pagePath: '/pages/miniprogram/index'
									},
					{
						iconPath: 'photo',
						selectedIconPath: 'photo-fill',
						text: '书架',
						customIcon: false,
						pagePath: '/pages/miniprogram/books'
									},
					{
						iconPath: 'https://cdn.uviewui.com/uview/common/min_button.png',
						selectedIconPath: 'https://cdn.uviewui.com/uview/common/min_button_select.png',
						text: '书店',
						customIcon: false,
						pagePath: '/pages/miniprogram/bookshop'
									},
					{
						iconPath: 'play-right',
						selectedIconPath: 'play-right-fill',
						text: '我的',
						customIcon: false,
						pagePath: '/pages/miniprogram/user'
									},
								],
				current: 0,
				menuList: [],
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				phone: uni.getStorageSync('phone') || '',
				numList: [{ name: 'S' }, { name: 'M' }, { name: 'T' }, { name: 'W' }, { name: 'T' }, { name: 'F' },
					{ name: 'S' }],
			}
		},
		created() {
			uni.$on('loginSuccess', this.loginSuccess)
		},
		onShow() {
			if (uni.getStorageSync('phone')) {
				this.menuList = ['AI推荐']
			} else {
				this.menuList = []
			}
		},
		methods: {
			goDetail() {
				uni.navigateTo({ url: './detail' })
			},
			loginSuccess(phone) {
				this.phone = phone
			},
			goLogin() {
				if (this.phone) return
				uni.navigateTo({ url: '/pages/index/login' })
			},
		}
	}
</script>

<style scoped>
	.menu-middle-view {
		width: 100%;
		display: flex;
		background-color: #fff;
	}

	.menu-right-view {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 40rpx 80rpx;
	}

	.right-title {
		font-size: 40rpx;
		margin-bottom: 40rpx;
	}

	.bank-view {
		display: flex;
		flex-direction: column;
	}

	.bank-view-list-sel {
		display: flex;
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #9E9EB3;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.bank-view-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #9E9EB3;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.bank-book-id {
		width: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bank-book-name {
		margin-left: 30rpx;
	}

	.bank-book-image {
		width: 63rpx;
		height: 84rpx;
		margin: 0 30rpx;
	}

	.bank-books-name-text {
		font-size: 24rpx;
		color: #000;
	}

	.books-see-view {
		display: flex;
		align-items: center;
		margin-top: 14rpx;
	}

	.see-num-text {
		margin-left: 10rpx;
	}

	.middle-view-item {
		flex: 1;
		border-right: 1rpx solid #F0F0F0;
		display: flex;
		flex-direction: column;
	}

	.book-item-view {
		flex: 1;
		padding: 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.book-image {
		width: 102rpx;
		height: 136rpx;
	}

	.book-text1 {
		width: 102px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 26rpx;
		margin: 14rpx 0 10rpx;
	}

	.book-text2 {
		font-size: 22rpx;
		color: #999;
	}

	.book-title {
		font-size: 32rpx;
	}

	.menu-title-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx 0;
	}

	.menu-title-text {
		font-size: 34rpx;
	}

	.menu-item-view {
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}

	.view-line {
		margin: 0 10rpx;
		width: 2rpx;
		height: 28rpx;
		background-color: #9E9EB3;
	}

	.userinfo-view {
		padding: 30rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.log-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		margin-top: 20rpx;
	}

	.today-log {
		padding: 20rpx 0;
		font-size: 36rpx;
		font-weight: 600;
	}

	.time-view {
		margin-bottom: 20rpx;
	}

	.u-progress-content {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.u-progress-info {
		font-size: 28rpx;
		padding-left: 16rpx;
		letter-spacing: 2rpx
	}

	.now-read-view {
		/* width: 300rpx; */
		margin-bottom: 50rpx;
	}

	.now-read-text {
		font-size: 30rpx;
		font-weight: 600;
		margin-bottom: 30rpx;
	}

	.now-book-view {
		width: 300rpx;
		margin-right: 30rpx;
	}

	.now-book-img {
		width: 300rpx;
		height: 400rpx;
	}

	.now-book-name {
		width: 300rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		margin: 12rpx 0;
	}

	.now-book-pre {
		font-size: 20rpx;
		color: #9E9EB3;
	}

	.book-scroll {
		width: 750rpx;
	}
</style>